.loading-spinner__container {
  @apply max-w-sm bg-primary-900 shadow-lg rounded-t-lg flex px-6 pt-3 pb-2 items-center justify-center;
}

.loading-spinner__xs {
  @apply relative w-4 h-4;
}

.loading-spinner__sm {
  @apply relative w-5 h-5;
}

.loading-spinner__md {
  @apply relative w-6 h-6;
}

.loading-spinner__lg {
  @apply relative w-8 h-8;
}

.loading-spinner__xl {
  @apply relative w-10 h-10;
}

.loading-spinner__2xl {
  @apply relative w-12 h-12;
}

.loading-spinner__svg {
  animation: loadingSpinnerRotate 2s linear infinite;
}

.loading-spinner__svg-path {
  stroke: #68d391;
  stroke-linecap: round;
  animation: loadingSpinnerdash 1.5s ease-in-out infinite;
}

@keyframes loadingSpinnerRotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loadingSpinnerdash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

@keyframes loading-spinner__slide-up {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes loading-spinner__slide-down {
  from {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.loading-spinner__slide-up {
  animation: loading-spinner__slide-up 0.5s ease-in-out;
}

.loading-spinner__slide-down {
  animation: loading-spinner__slide-down 0.5s ease-in-out;
}
